<template>
  <van-field
    :model-value="value"
    is-link
    readonly
    label="可以预约日期"
    :rules="[{ required: true, message: '请输入' }]"
    @click="showReserveDatePicker = true"
  />

  <van-popup v-model:show="showReserveDatePicker" position="bottom">
    <van-datetime-picker
      type="date"
      title="选择年月日"
      :min-date="minDate"
      @confirm="onConfirm"
      @cancel="showReserveDatePicker = false"
    />
  </van-popup>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { ref, defineEmits, defineProps } from 'vue'
import { useVModel } from '@vueuse/core'
import { useDatePicker } from '/@/use/datePicker'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue'])

const value = useVModel(props, 'modelValue', emit)

const { onConfirm, picker: showReserveDatePicker } = useDatePicker(value)

const minDate = ref(new Date())
</script>
